<template>
  <scroll-view
    class="menu-content"
    scroll-y="true"
    @scroll="scrollFn"
    :show-scrollbar="false"
  >
    <view class="pd-1015">
      <tab008></tab008>
    </view>
    <view class="list-box">
      <view
        class="top-fixed"
        :class="{ fixedStyle }"
        :style="{ top: setFixedTop + 'px' }"
      >
        <hstab009></hstab009>
      </view>
      <view class="pdlr-10">
        <list003
          v-for="item in weipinhuiBigData"
          :key="item.id"
          :showData="item"
        ></list003>
      </view>
    </view>
    <view class="bg-grey">
      <view class="mrb-30">
        <booth004></booth004>
      </view>
      <view class="panel-list-item">
        <!-- 动态每个面板组件 -->
        <panel006
          class="list-item"
          :showData="itemData"
          v-for="itemData in weipinhuiBigData"
          :key="itemData.id"
        >
        </panel006>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  getCurrentInstance,
} from "vue";
import { weipinhuiBigData } from "@/common/simulatedData.js";

export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    const data = reactive({
      weipinhuiBigData,
      fixedStyle: false,
      scrollTop: 0,
      actualScrollTop: 0,
      setFixedTop: 0,
    });
    onMounted(() => {
      getScrollInfo();
      setTimeout(() => {
        getTopFixedInfo();
      }, 100);
    });
    // 获取滚动元素位置信息
    const { proxy } = getCurrentInstance();
    // 获取顶部tabs滚动元素信息
    const getScrollInfo = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .select(".uni-scroll-view-content")
        .boundingClientRect((ele) => {
          data.scrollTop = ele.top;
        })
        .exec();
    };
    const getTopFixedInfo = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .select(".top-fixed")
        .boundingClientRect((ele) => {
          data.actualScrollTop = ele.top - data.scrollTop;
        })
        .exec();
    };

    const scrollFn = (e) => {
      if (e.detail.scrollTop >= data.actualScrollTop) {
        data.fixedStyle = true;
        data.setFixedTop = data.scrollTop;
      } else {
        data.fixedStyle = false;
        data.setFixedTop = 0;
      }
    };
    return {
      scrollFn,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.menu-content {
  height: calc(100vh - 280rpx);
  box-sizing: border-box;
  border-radius: 35rpx 35rpx 0 0;
  overflow: hidden;
  .list-box {
    padding-bottom: 0rpx;
    margin-top: 6rpx;
    background: #fff;
    padding-top: 86rpx;
    border-radius: 35rpx 35rpx 0 0;
    position: relative;
    .top-fixed {
      padding: 20rpx 10rpx;
      border-radius: 35rpx 35rpx 0 0;
      background: #fff;
      overflow: hidden;
      z-index: 99;
      width: 100%;
      box-sizing: border-box;
      position: absolute;
      top: 0rpx;
      left: 0rpx;
      &.fixedStyle {
        position: fixed;
      }
    }
  }
  .panel-list-item {
    width: 100%;
    column-count: 2;
    column-gap: 20rpx;
    row-gap: 0rpx;

    // 行间距
    padding: 0 10rpx;
    box-sizing: border-box;
    .list-item {
      margin-bottom: 20rpx;
    }
  }
}
</style>
